<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script src="<%=request.getContextPath()%>/script/prototype.js" type="text/javascript"  charset="UTF-8"></script>
		
		<script type="text/javascript" src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.7&appid=dasXcejV34Gl3o1vF_JLmdb7TfH9ZO5fbVIpCvSN1.iG2GgJjYrdKauT0szH7ZWxE88PFfn1Csp..uvT"></script>
		
		<script>
		
			//맵변수
			//맵에 관련된 모든 일을 이 변수가 한다.
			var map;
			
			//시작
			//이벤트 등록과, 맵생성	
			Event.observe(window,"load",StartYMap);	//야후맵
			
			//맵 생성
			function StartYMap(){
			
				// 지도 오브젝트를 생성 합니다.
				map = new YMap(document.getElementById('map'));
			
				// 지도 유형 콘트롤을 추가합니다.
				map.addTypeControl();
				// 지도 확대/축소 콘트롤을 추가합니다.
				map.addZoomLong();
				// 지도 이동 콘트롤을 추가합니다.
				map.addPanControl();
			
				// 지도보기 유형을 선택합니다.
				// YAHOO_MAP_SAT: 위성지도
				// YAHOO_MAP_HYB: 하이브리드 지도
				// YAHOO_MAP_REG: 일반지도
				map.setMapType(YAHOO_MAP_REG);
			
				// WGS84 좌표계의 경위도 좌표 오브젝트를 전달하여 위치를 지정
				// var center_point = new YGeoPoint(37.37160610616,127.10718565157);
				// map.drawZoomAndCenter(center_point,3);
				var center_point = new YGeoPoint(${areaInfoItem.latitude},${areaInfoItem.longitude});
				map.drawZoomAndCenter(center_point,3);
				
				//이벤트 등록
				YEvent.Capture(map, EventsList.endPan,event_endPan);
				
			}
			
			
			//지도를 옮겼을때 일어나는 이벤트
			//옮겨 졌을때 해당 지역의 경도, 위도로 
			//지역명을 가지고 온다.
			function event_endPan(_e,_c){
				
				
			}
			
			
			
			
			//지역명으로 이미지 검색
			function do_search_image_area(area_name){
			
				//다음 이미지 검색을 택했다.
				var params="openapidiv=daum";
			
				params+="&pageno=1";
				params+="&word="+encodeURIComponent(area_name);
				
				new ajax.Request("../servlet/OPENAPIA?", params, result_img_list, "POST", this);
				
			}
			
			//컨텐츠 삭제
			function clearcontent(elementid){
				while($(elementid).firstChild){
					$(elementid).removeChild($(elementid).firstChild);
				}
			}
		</script>
		
	</head>
	<body>
		<table style="border:1px solid #FFF;background-color:#e1f0f5;" width="700">
			<thead>
				<tr>
					<td colspan="3" height="40">지역정보</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td width="500" align="center" colspan="3">
						<div id="map"></div>
					</td>
				</tr>
			</tbody>
		</table>
		
		<br/><br/>
		
		<div id="result_list">
			<table style="border:1px solid #FFF;height:30px;background-color:#e1f0f5;">
				<thead>
					<tr>
						<td colspan="3" height="30">맛집</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td align="center" width="100" style="border:1px solid #000;height:30px;">이름</td>
						<td align="center" width="100" style="border:1px solid #000;height:30px;">전화번호</td>
						<td align="center" width="300" style="border:1px solid #000;height:30px;">주소</td>
						<td align="center" width="300" style="border:1px solid #000;height:30px;">설명</td>
					</tr>
					<c:forEach begin="0" items="${requestScope.naverfood}" var="naverfood1">
						<tr>
							<td><a href="${naverfood1.link}">${naverfood1.title}</a></td>
							<td>${naverfood1.telephone}</td>
							<td>${naverfood1.address}</td>
							<td>${naverfood1.description}</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
		
		<div id="result_list">
			<table style="border:1px solid #FFF;height:30px;background-color:#e1f0f5;">
				<thead>
					<tr>
						<td colspan="3" height="30">숙박</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td align="center" width="100" style="border:1px solid #000;height:30px;">이름</td>
						<td align="center" width="100" style="border:1px solid #000;height:30px;">전화번호</td>
						<td align="center" width="300" style="border:1px solid #000;height:30px;">주소</td>
						<td align="center" width="300" style="border:1px solid #000;height:30px;">설명</td>
					</tr>
					<c:forEach begin="0" items="${requestScope.naversleep}" var="naversleep1">
						<tr>
							<td><a href="${naversleep1.link}">${naversleep1.title}</a></td>
							<td>${naversleep1.telephone}</td>
							<td>${naversleep1.address}</td>
							<td>${naversleep1.description}</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
		
		<br/><br/>
		
		<table align="center">
			<tr>
				<td><input type="button" value="뒤로" onclick="javascript:history.go(-1)"/></td>
			</tr>
		</table>
		
	</body>
</html>
			 